<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态路由</title>
    <script src="./../vue/vue.js"></script>
    <script src="./../vue/vue-router.js"></script>
</head>
<body>

    <!-- 
        动态路由
        1、 路由带参数      /:params                /aaa                            => {params: 'aaa'}
                        /foo/:name/age/:age         /foo/ming/age/12              => {name: "ming", age: 12}
        2、路由参数变化原来的组件实例会被复用 
            所以如果需要监听 路由参数变化 可以直接使用 watch 监听 $route 参数变化
            watch: {
                $route(to,from){

                }
            }
        3、 导航守卫
            beforeRouteUpdate(to,from,next){
                //next必须调用，否则无法实现跳转to
                next()
            }

        4、捕获路由 
            path: "*"

     -->
    <div id="app">
        <router-view></router-view>
    </div>

    <script>

        const Foo = {
            template: `
            <div>FOO</div>
            `
        }

        const Bar = {
            template: `
            <div>
                <div>BAR</div>
                <div>{{ $route.params.name }}</div>
            </div>
            `,
            watch: {
                $route(to,from){
                    console.log("路由参数变化了 \nto: ",to,"\nfrom: ",from)
                }
            }
        }

        const router = new VueRouter({
            routes: [
                {path: '/', component: Foo},
                {path: '/bar/:name', component: Bar},
            ]
        })

        let vm = new Vue({
            router,
            el: '#app',
            data() {
                return {
                    
                }
            },
        })
    </script>
    
</body>
</html>